<template>
    <div class="flex-col-center error-container">
        <div
            class="error-img"
            @click="onClick"></div>
        <div
            v-if="showDebugInfo"
            class="debug-info">
            {{ debugInfo }}
        </div>
        <div
            class="desc"
            @click="onClick">
            Error: Page not found
        </div>
        <div
            class="btn-reload"
            @click="onReload">
            {{ $t('common.reload') }}
        </div>
        <div
            class="btn-back"
            @click="goBack">
            {{ $t('common.back') }}
        </div>
    </div>
</template>

<script lang="ts" setup>
    import { ref, onMounted } from 'vue';
    import { closeWebview } from '@/utils/NativeUtils';
    import { useRouter } from 'vue-router';
    import { closeToast } from 'vant';
    import { getStorageItem } from '@utils/StorageManager';

    const router = useRouter();
    const goBack = () => {
        if (!closeWebview()) {
            router.replace('/');
        }
    };
    const onReload = () => {
        window.location.href = (<{ BrowserUrl: string }>getStorageItem('errorRoute')).BrowserUrl;
    };

    const clickNum = ref(0);
    const showDebugInfo = ref(false);
    const debugInfo = ref('');
    onMounted(() => {
        // 到错误页，默认清掉loading效果
        closeToast(true);
        showDebugInfo.value = !import.meta.env.PROD;
    });
    const onClick = () => {
        clickNum.value++;
        if (clickNum.value > 10) {
            clickNum.value = 0;
            showDebugInfo.value = true;
            debugInfo.value = (<{ BrowserUrl: string }>getStorageItem('errorRoute'))?.BrowserUrl;
        }
    };
</script>

<style lang="scss" scoped>
    .error-container {
        min-height: 100vh;
        background-color: #e7e7e7;

        .error-img {
            width: pxToRem(250);
            height: pxToRem(235);
            background: url('../assets/images/error.png') center center/100% no-repeat;
        }

        .desc {
            font-weight: 500;
            font-size: pxToRem(16);
            color: #333333;
            text-align: center;
            letter-spacing: pxToRem(-0.3333);
            z-index: 1;
        }

        .debug-info {
            color: #df0024;
            text-align: center;
        }

        .btn-reload,
        .btn-back {
            margin-top: pxToRem(10);
            width: pxToRem(128);
            height: pxToRem(42);
            line-height: pxToRem(42);
            font-size: pxToRem(16);
            cursor: pointer;
            text-align: center;
            border-radius: pxToRem(36);
            z-index: 2;
        }

        .btn-reload {
            top: calc(50% + 2.85rem);
            color: #ffffff;
            background: #05cdbb;
        }

        .btn-back {
            top: calc(50% + 4.5rem);
            font-weight: 500;
            color: #333333;
            border: pxToRem(1) solid #eeeeee;
            background: #ffffff;
        }
    }
</style>
